<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客房浏览</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
</head>
<body>
<div >

    <div>
    <h3 style="text-align: center">客户预订订单表</h3>
        <div class="layui-card-body ">
            <form class="layui-form layui-col-space5" action="#" th:action="@{/user-selectRoomType}" method="get">
                <div class="layui-inline layui-show-xs-block">
                    <input class="layui-input"  autocomplete="off" placeholder="入住日" name="arriveDate" id="arriveDate">
                </div>
                <div class="layui-inline layui-show-xs-block">
                    <input class="layui-input"  autocomplete="off" placeholder="离店日" name="leaveDate" id="leaveDate">
                </div>
                <div class="layui-inline layui-show-xs-block">
                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </form>
        </div>
    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th>房间样式</th>
            <th>名称</th>
            <th>额定人数</th>
            <th>床位数</th>
            <th>价格</th>
            <th>介绍</th>
        </tr>
        <tr th:each="roomType:${roomTypes}">
            <td th:if="${roomType.getTypeID()==1}"><img src="images/1547863202049.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==2}"><img src="images/1547863299550.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==3}"><img src="images/1547863308339.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==4}"><img src="images/1547863315754.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==5}"><img src="images/1547863370413.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==6}"><img src="images/1547863398297.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==7}"><img src="images/1547863458969.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==8}"><img src="images/1547863486075.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==9}"><img src="images/1547863508790.jpg" width="300px"></td>
            <td th:if="${roomType.getTypeID()==10}"><img src="images/1547863538884.jpg" width="300px"></td>
            <td><span th:text="${roomType.getTypeName()}"></span></td>
            <td><span th:text="${roomType.getLiveNum()}"></span></td>
            <td><span th:text="${roomType.getBedNum()}"></span></td>
            <td><span th:text="${roomType.getPrice()}"></span></td>
            <td><span th:text="${roomType.getRemark()}"></span></td>
        </tr>
    </table>
</div>
</div>
<script src="/static/build/layui.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        var startDate=laydate.render({
            elem: '#arriveDate',
            min:'nowTime',
            done:function(value,date){
                if(value!=""){
                    date.month=date.month-1;
                    endDate.config.min=date;
                }else{
                    endDate.config.min=startDate.config.min;
                }
            },
        });
        var endDate=laydate.render({
            elem: '#leaveDate',
            min:'nowTime',
            done:function(value,date){
                if(value!=""){
                    date.month=date.month-1;
                    startDate.config.max=date;
                }else{
                    startDate.config.max=endDate.config.max;
                }
            }
        });
    });
</script>
</body>
</html>
